<template>
    <div>
        <el-date-picker
                v-model="timeVal"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                @change="pickTime"
        >
        </el-date-picker>
    </div>
</template>

<script>
    export default {
        name: "timePick.vue",
        data(){
            return {
                timeVal:'',
                timeArr:[],
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                    ,
                    disabledDate(time){
                        return time.getTime()>Date.now()
                    }
                },
            }
        },
        methods:{
            pickTime(){
                let timeArr = []
                for(let i in this.timeVal){
                    let time = this.timeVal[i];
                    let year = time.getFullYear();
                    let month = this.$util.checkTime(time.getMonth() + 1);
                    let day = this.$util.checkTime(time.getDate());
                    let stamp = '';
                    if(i == 0){
                        stamp = this.$util.timeToTimestamp(`${year}-${month}-${day} 00:00:00`);
                        timeArr.push(stamp)
                    }
                    if(i == 1){
                        stamp = this.$util.timeToTimestamp(`${year}-${month}-${day} 23:59:59`);
                        timeArr.push(stamp)
                    }
                }
                this.timeArr = timeArr
                this.$emit('timeArr',this.timeArr)
            },
        }
    }
</script>

<style scoped>
    .el-date-editor--daterange.el-input__inner{
        width:100%;
    }
</style>
